<template>
	<view class="page">
		<!--<view class="header">
			<view class="input-view">
				<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
				<input v-model="inputText" bindconfirm="search" class="input" type="text" placeholder="输入加工单号或名称搜索" />
				<input confirm-type="搜索" @blur="postSearch" class="input" type="text" placeholder="输入加工单号或名称搜索" />
			</view>
		</view>
		<view class="cu-bar bg-white search">
		    <view class="search-form round">
		        <text class="cuIcon-search"></text>
		        <p-input-search :dataSource="listData" @select="handleChange" placeholder="输入加工单号搜索"></p-input-search>
		    </view>
		    <view class="action" @tap="search">
		        <button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
		    </view>
		</view>-->
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in listData"
			 :key="index" >
				<view class="uni-media-list">
					<!--<image class="uni-media-list-logo" src="../../static/huiyuanlb.png"></image>-->
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">
						<text>日期：{{item.date}}</text>
						<text>合格率：{{item.rate}}</text>
						</view>
						<!-- <view class="uni-media-list-text-bottom ">
							<text>{{item.matnr}} {{item.colorName}}{{item.sizeName}}</text>
							<text>数量：{{item.gmnga}}</text>
						</view> -->
					</view>
					<!-- <view class="uni-list-cell-navigate uni-navigate-right"></view> -->
				</view>
			</view>
			<!--<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>-->
		</view>
	</view>
</template>

<script>

	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				title: '下拉刷新 + 加载更多',
				data: [],
				listData: [],
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				inputText:""
			};
		},

		onShow() {
			this.listData = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
			this.initData();
			// this.loadData();
		},
		onLoad(e) {
			// console.log(e.selFlag);
			// this.selFlag = e.selFlag;
		},
		onUnload() {
			this.max = 0,
				// this.data = [],
				this.listData = [],
				this.pageNo = 1,
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("endflag" + this.endFlag)
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				// this.pageNo = this.pageNo + 1;
				this.getList()
				// this.loadData()
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
			// this.loadData();
		},
		methods: {
			// search(){
			//     this.pageNo=1;
			//     this.listData=[];
			//     this.loadData();
			// },
			// loadData(){
			//     // this.loadModal=true;
			//     selectCustomerList({
			//         pageNo:this.pageNo,
			//         pageSize:this.pageSize,
			// 		dispatchNo:this.inputText?this.inputText:''
			//         // name1:this.lgobe?this.lgobe:'',
			//     }).then(res=>{
			//         if(res.success==true){
			//             res.result.records.forEach(item=>{
			//                 // item.is_default=0;
			//                 item.name=item.dispatchNo
			//                 this.listData.push(item)
			//             })
			//             if(res.result.records.length>=10){
			//                 this.status='loading';
			//             }else{
			//                 this.status='noMore';
			//             }
			//         }
			//         // this.loadModal=false;
			//         // uni.stopPullDownRefresh();
			//     })
			// },
			// //用户点击获取的数据
			// handleChange(data) {
			//     this.inputText=data;
			// },
			// onInput(e) {
			// 	console.log(this.inputtext)
			// 	setTimeout(() => { console.log(this.inputtext) }, 0)
			// 	// 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
			//     console.log(e.detail)
			//     // this.text = e.detail
			// 	},

			initData() {
// 				uni.showLoading({
// 					title: '加载中',
// 					mask: false
// 				});
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},

			getList() {
				let url = '/dcloud/sdReport/queryPassRateReport'
				this.$http.get(url, {
					params: {
						// dispatchNo:"",
						// createTime:"",
						// psmng:"",
						// createBy:""
					}
				}).then(res => {
					// console.log(res.data)
					// console.log(res.data.Line)
					if (res.statusCode=='200') {

						let data = res.data.Line.series[0].data;
						let i = 0;
						res.data.Line.categories.forEach(e =>{
							let item = {}
							item.date = e;
							item.rate = data[i]+'%';
							this.listData.push(item);
							i++;
						})
					}
				}).catch(err => {
					console.log(err);
				});
			},

			postSearch(e) {
				this.listData = [];
				this.endFlag = false;
				this.pageNo = 1;
				this.filter = e.detail.value;
				this.loadMoreText = "加载更多",
					this.getList();
			},
			// computed:{
			// 		listData () {
			// 			var arr = []
			// 			this.list.forEach((item) => arr.push(item))
			// 			if (this.inputText) {
			// 				arr = this.list.filter(item => item.taskNumber.includes(this.inputText))
			// 			}
			// 			return arr
			// 		}
			// 	},
		}
	}
</script>

<style>
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.bottom {
		position: fixed;
		bottom: 90upx;
		right: 50upx;
		width: 90upx;
		height: 90upx;
	}

	.uni-media-list-text-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #8f8f94;
	}
	.uni-media-list-body{
		height: 54upx;
	}
</style>
